嗨～嗨嗨～今天是鐵人賽的第７天，今天要講的是單一元件檔、網頁封裝為元件模板，還有關於一些Vue元件的命名規則。
單一元件檔將某一元件用.vue的方式包，再透過import的方式將這個檔案引入作為元件，這個又稱單一元件檔。
單一元件檔又包含：、、。
一個元件就是一個.vue，這個元件的模板、樣式、行為邏輯是要互相契合，促使元件更容易管理並有高維護性。

如何將網頁片段封裝為元件模板：

template 屬性封裝:

app.component('video-block', {
    template: `
        <div class=video">
            <img src="...">
            <div class"video-body">
                <div>...</div>
            </div>
         </div>`
});

整個<div class=video">...區塊封裝成一個名叫video-block元件，在使用的時候，只先將他引入後，模板對應的位置插入。
HTML模板結構可能會變得越來越大，光用template直接掛上HTML字串時，可能你的程式架構就會變得不那麼好閱讀、管理。以把整個 HTML 模板區塊透過 ... 這種方式通常被稱為X-Templates，HTML字串放在script且加上type="text/x-template"，而子元件註冊時，就在原本的template屬性加上對應的selector，結果與放在template屬性是一樣的。

app.component('video-block', {
    template: '#video-block'
}); 

<script type="text/x-template" id="video-block">
    <div>
        <img src="...">
        <div class"video-body">
            <div>...</div>
        </div>
    </div>
</script>

以上為今天的內容，謝謝各位的閱讀。